<script setup lang="ts">
// #ifdef MP
import { onAddToFavorites, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'
import { wxCollect, wxShare } from '@/libs/share'

onShareAppMessage(wxShare(true))
onShareTimeline(wxShare(false))
onAddToFavorites(wxCollect())
// #endif

import { onMounted, onUnmounted } from 'vue'

import { clear, list, update } from './data'
import { imagePath } from '@/libs/file-utils'

const img_banner = imagePath('community/group/normal/banner.png')
const icon_group = imagePath('community/group/normal/icon-group.png')
const btn_bg = imagePath('community/group/normal/btn-bg.png')

const join = (id: number) => {
  uni.navigateTo({ url: '/pages/community/group/qrcode/index?id=' + id })
}

const toFeedback = () => uni.navigateTo({ url: '/pages/user/feedback/index' })

onMounted(update)
onUnmounted(clear)
</script>

<template>
  <PageWrapper
    name="community-group-normal"
    :pageStyle="{ backgroundColor: '#FAEAFC' }"
  >
    <div
      class="banner"
      :style="{ backgroundImage: img_banner }"
    ></div>

    <div class="box">
      <div class="inner">
        <div
          v-for="(item, index) in list"
          :key="index"
          class="item"
        >
          <div
            class="icon"
            :style="{ backgroundImage: icon_group }"
          ></div>
          <div class="info">
            <div class="name">{{ item.groupName }}</div>
            <div>{{ item.groupDesc }}</div>
          </div>
          <div
            class="btn"
            @click="join(item.id)"
          >一键进群</div>
        </div>
      </div>
    </div>

    <div
      class="feedback"
      :style="{ backgroundImage: btn_bg }"
      @click="toFeedback"
    >反馈</div>
  </PageWrapper>
</template>

<style lang="less" scoped>
.banner {
  width: 750rpx;
  height: 398rpx;
}

.box {
  width: 686rpx;

  margin: 32rpx auto;

  box-sizing: border-box;
  padding: 28rpx 26rpx;

  border-radius: 32rpx;
  background-color: #EC9EC6;

  .inner {
    width: 100%;
    min-height: 678rpx;

    border-radius: 16rpx;
    background-color: #FFF8F1;

    display: flex;
    flex-direction: column;
    row-gap: 16rpx;

    overflow: hidden;

    .item {
      width: 100%;

      box-sizing: border-box;
      padding: 18rpx 34rpx;

      background-color: #FEF0DD;

      display: flex;
      align-items: center;

      .icon {
        width: 100rpx;
        height: 100rpx;
      }

      .info {
        margin-left: 16rpx;
        flex: 1;

        color: #622F86;
        font-size: 24rpx;
        line-height: 34rpx;

        .name {
          margin-bottom: 10rpx;
          font-size: 48rpx;
          line-height: 48rpx;
        }
      }

      .btn {
        width: 188rpx;
        height: 64rpx;

        border-radius: 32rpx;
        background-color: #DF698C;

        color: #fff;
        font-size: 32rpx;
        line-height: 64rpx;
        text-align: center;
      }
    }
  }
}

.feedback {
  width: 309rpx;
  height: 117rpx;

  margin: 88rpx auto 100rpx;

  color: #fff;
  font-size: 48rpx;
  text-align: center;
  line-height: 100rpx;
}
</style>